Hamlで開発効率アップ｜Sublime text 2でビルドしてみました。
先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。
人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。
さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。
アジェンダ
- Hamlとは？
- Hamlの書き方
- Sublime text 2でビルド(ファイル出力)
- おまけ
Hamlとは？
XHTML Abstraction Markup Languageの略称です。
と言われましてもなんのことだ？？ってなるかと思います。
日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。
HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述が行えます。
またHaml内では、変数を宣言、条件分岐、繰り返し処置が出来るので魅力です！
Haml
%div.container
%h1 Title
%h2 Subtitle
.content
Sample Text
Html
<div class='container'>
<h1>Title</h1>
<h2 id="toc-subtitle">Subtitle</h2>
<div class='content'>
Sample Text
</div>
</div>
Hamlの書き方
基本的な書き方
Hamlの基本的な書き方として、タグの前に%の記述、インデント(半角スペース2つ)で記述します。
また、インデント記述に準拠すれば、htmlでも記述も可能です。
Haml
%div <h1>Sample Headline</h1> %p Sample Text
出力Html
<div>
<h1>Sample Headline</h1>
<p>Sample Text</p>
</div>
属性
Haml
%p
%a(href="#" title="Sample Text" target="_blank")
Sample Text
出力Html
<p>
<a href='#' target='_blank' title='Sample Text' rel="noopener noreferrer">
Sample Text
</a>
</p>
idとclass
Haml
%div#sampleID
%div.sampleClass
出力Html
<div id='sampleID'></div>
<div class='sampleClass'></div>
コメントアウト
Haml
/ 複数行の コメント / 一行のコメント -# Hamlファイルのみの コメントです
出力Html
<!-- 複数行の コメント --> <!-- 一行のコメント -->
※ -#記述のコメントはHamlのみのコメントなので、出力されたHtmlには記述されていません。
変数
先頭に"-"をつけて、変数の宣言をすることができます。
Haml
- title = "サンプルタイトル"
- text = "サンプルテキスト"
- var = "変数"
%div
%h1= title
%p= text
%div
%p
文章の中にも#{var}が出力できます。
出力Html
<div>
<h1>サンプルタイトル</h1>
<p>サンプルテキスト</p>
</div>
<div>
<p>
文章の中にも変数が出力できます。
</p>
</div>
条件分岐
Haml
- age = 19
- if age >= 20
%p 一緒にお酒飲みに行こう！
- else
%p お酒は大人になってから！
出力Html
<p>お酒は大人になってから！</p>
繰り返し処理
Haml
%ul
- (1..5).each do |i|
%li Sample No.#{i}
-# 配列も宣言できます。
- arry = ['red', 'blue', 'yellow', 'green']
%ul
- arry.each do |i|
%li color #{i}
出力Html
<ul>
<li>Sample No.1</li>
<li>Sample No.2</li>
<li>Sample No.3</li>
<li>Sample No.4</li>
<li>Sample No.5</li>
</ul>
<ul>
<li>color red</li>
<li>color blue</li>
<li>color yellow</li>
<li>color green</li>
</ul>
Html5のテンプレート
Haml
!!!
%html{:lang => "ja"}
%head
%meta{:charset => "utf-8"}/
%title Sample Haml
%meta{:content => "", :name => "keywords"}
%meta{:content => "", :name => "description"}
%link{:href => "css/sample.css", :media => "all", :rel => "stylesheet"}
%body
#header
%h1 Sample Haml
#content
#footer
%script{:src => "js/sample.js"}
Html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>Sample Haml</title>
<meta content='' name='keywords'>
<meta content='' name='description'>
<link href='css/sample.css' media='all' rel='stylesheet'>
</head>
<body>
<div id='header'>
<h1>Sample Haml</h1>
</div>
<div id='content'></div>
<div id='footer'></div>
<script src='js/sample.js'></script>
</body>
</html>
以下サイトを参考にさせていただきました。
Sublime text 2でビルド(ファイル出力)
最近、なにかとSublime text 2(以下:ST2)関連の記事を書かせていただいて、
今回もエディタはST2で進めさせていただきます。
Hamlビルド(Hamlファイル出力)の流れ
- rubyをインストール
- hamlをインストール
- ST2のビルドシステム指定ファイルをを新規で作成
- hamlをビルドしてみる。
1. rubyをインストール
hamlを動かすためにはrubyが必要なのでインストールしてください。
インストール方法
弊社、野中(ブログの中の人)、山形(イケテルRubyマン)の記事をご参考いただければと思います。
※環境変数PATHを通しておくのも忘れずにお願いします。
2. hamlをインストール
rubyがインストール完了したら、続いてhamlのインストールを行います。Win:コマンドプロンプト、Mac:ターミナルを開いて
以下コマンドを実行します。
gem install haml
ST2のビルドシステム指定ファイルをを新規で作成
ST2はビルド(ファイルを出力)してくれるツールが入っているので、そちらを使用してビルドしたいと思います。
まず、ST2のメニューから
Tools > Build System > New Build Systemを選択
新規でのビルドシステム指定ファイルを作成されます。
{
"cmd": "haml",
"selector": "source.haml",
"working_dir": "${file_path}",
"windows":
{
"cmd": ["haml.bat", "$file", "$file_path/$file_base_name.html"]
},
"osx":
{
"cmd": ["haml", "$file", "$file_path/$file_base_name.html"]
}
}
上記設定を記載して保存します。すると設定ファイルの名前をきかれるので、
haml.sublime-buildとして保存しておきます。
以下サイトを参考にさせていただきました。
3. Hamlをビルドしてみる。
それでは、早速Hamlをビルド(ファイル出力)してみたいと思います。
その前に、ビルドする種類を指定しておきます。
Tools > Build System > haml
それでは、どこかに作業ファイルをつくりし、拡張子をtest.hamlファイルを作成し
以下の記述をします
test.haml
!!!
記述後、ビルドコマンドのショートカット[Ctrl + B]でビルドします。
test.html
<!DOCTYPE html>
すると同じ階層に上記の記述された、test.htmlが出力されていれば成功です。
おまけ
保存時に自動でビルド。
常に[Ctrl + B]でビルドしてもいいのですが、 保存時に自動でビルドしてくれる設定をしたいと思います。
その方法は、SublimeOnSaveBuildというパッケージをインストールします。
お約束の[Ctrl + Shift + P]でPackage Controll : Instal Packageを選択
SublimeOnSaveBuildがリストの中にあるので、選択してインストール。
SublimeOnSaveBuildの設定
ST2のメニューからPrerences > Package Setting > SublimeOnSaveBuild > settings - Userを選択
以下、デフォルト設定の記述にhamlを追記して保存。
{
"filename_filter": "\\.(css|js|sass|less|scss|haml)$",
"build_on_save": 1
}
これで、hamlファイルを保存時自動でhtmlファイルを出力してくれるようになりました。
![[登壇資料]DevelopersIO 2024 TOKYOで「Notion × Wraptasサイト作成ハンズオン」を行いました #devio2024](https://images.ctfassets.net/ct0aopd36mqt/15fBmQfuSigujXU7gsvbcB/b38e8dcb0f6d4cc53a85bbf4554ecdbe/devio2024_tokyo_w1200h630.png)
